<template>
  <div>
    <div class="w-100 mauto">
      <el-form
        v-if="Isshow"
        ref="ruleForm"
        :model="from"
        :rules="rules"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item label="认证密码" prop="payPassword">
          <el-input
            v-model="from.payPassword"
            class="head-link"
            size="mini"
          ></el-input>
          <el-button
            class="cation"
            icon="el-icon-search"
            size="mini"
            type="primary"
            @click="submitForm"
            >认证
          </el-button>
        </el-form-item>
      </el-form>
      <div v-if="isHide">
        <div>
          <span>平台不会保存,请你妥善保管</span>
          <span class="obtain">
            <el-button
              icon="el-icon-search"
              size="mini"
              type="primary"
              @click="Upload"
              >上传
            </el-button>
          </span>
        </div>
        <div class="Top">
          <div class="keyText">商户公钥:</div>
          <div class="keyText-top">
            <el-input
              v-model="from.publicKey"
              :rows="3"
              disabled
              type="textarea"
            ></el-input>
          </div>
        </div>
        <!--        <div class="Top">-->
        <!--          <div class="keyText">平台公钥:</div>-->
        <!--          <div class="keyText-top">-->
        <!--            <el-input v-model="from.Key" :rows="3" type="textarea"></el-input>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import { homtMy, uploadKey, checkPayPassword } from "@/assets/js/homePage";

export default {
  data() {
    return {
      Isshow: true,
      isHide: false,
      from: {
        publicKey: "",
        Key: "",
        payPassword: "",
      },
      rules: {
        payPassword: [
          { required: true, message: "请输入认证密码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.my();
  },
  methods: {
    //获取个人信息
    async my() {
      let res = await homtMy("");
      if (res.code === 200) {
        this.from.publicKey = res.data.data.merchants.merchantsPublicKey;
      }
    },
    //认证
    async submitForm() {
      let num = false;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          num = valid;
        }
      });
      if (num) {
        let res = await checkPayPassword({
          payPassword: this.from.payPassword,
        });
        if (res.code === 200) {
          this.Isshow = false;
          this.isHide = true;
        }
      }
    },
    async Upload() {
      let res = await uploadKey({
        merchantPublicKey: this.from.publicKey,
      });
      if (res.code === 200) {
        this.Isshow = true;
        this.isHide = false;
        this.from.payPassword = "";
      }
    },
  },
};
</script>
<style scoped>
.obtain {
  margin-left: 10px;
}

.Top {
  margin-top: 15px;
}

.keyText {
  font-weight: bold;
}

.keyText-top {
  margin-top: 5px;
}

.cation {
  margin-left: 20px;
}

.head-link {
  width: 300px;
}
</style>
